const positionTest = require('../views/position.art')
const positionMovieList = require('../views/movie-list.art')
const positionModel = require('../models/position')
const movieSoomList = require('../views/moviesSoon.art')
const moviesExpected = require('../views/moviesExpected.art')


const BScroll = require('better-scroll')

class Position {
    constructor(){
        this.list = []
        this.movies = []
        this.moviesSoonList = []
        this.moviesSoonId = []
        this.moviesSoonTime = []
        this.moviesExpectedlist = []
        this.obj = {}
        this.i = 12
        this.j
        this.x = 10
        this.y
        this.expected = 10
    }

    renderer(list){
        this.arr = [];
        for(let i = 0;i<list.length;i++){
           this.arr.push(list[i].img.replace('w.h','128.180'));
        }
        let movieList = positionMovieList({
            list,
            arr:this.arr
        })

        $('main ul').html(movieList)
    }

    rendermoviesExpected(moviesExpectedlist){

        let moviesExpectedHtml = moviesExpected({
            list :moviesExpectedlist
        })
        $('main .most-expected').html(moviesExpectedHtml)
        $('.btn-red').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
        $('.btn-blue').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
    }

    rendermoivesSoon(obj){
        let moviesSoonListHtml = movieSoomList({
            obj
        })

        $('main ul').html(moviesSoonListHtml)
        $('.btn-red').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
        $('.btn-blue').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
    }

    expectedScroll(){
        let that = this
        $('.most-expected-list').on('scroll', async function(){
            if($('.most-expected-list').width() + $('.most-expected-list').scrollLeft() == ($('.expected-item').width()+10)*that.expected-10){
                let expectedResult = await positionModel.getMoviesExpected({
                    offset : that.expected
                })
                let moviesExpectedlist  = expectedResult.coming
                
                for(let i in moviesExpectedlist){
                    moviesExpectedlist[i].img = moviesExpectedlist[i].img.replace('w.h','170.230')
                    moviesExpectedlist[i].comingTitle = moviesExpectedlist[i].comingTitle.slice(0,-3)
                }
                that.moviesExpectedlist = [...that.moviesExpectedlist,...moviesExpectedlist]
                moviesExpectedlist = that.moviesExpectedlist
                that.rendermoviesExpected(moviesExpectedlist)
                $('.most-expected-list').scrollLeft( (($('.expected-item').width()+10)*that.expected-10)- ($('.most-expected-list').width()) )
                that.expected +=10
                that.expectedScroll()
            }
        })

    }

    async render(){
        let that = this

        let result = await positionModel.get1()  //得到电影数据
        let positionHtml = positionTest({});

        

        let $main = $('main');
        $main.html(positionHtml);
        $('.city').html(localStorage.getItem('cityHistory') || '北京');


        $('.city').on('tap',function(){  //城市路由点击
            location.hash = 'city'
        })

        $('#search').on('tap',function(){
            location.hash = 'search'
        })
        $('main .hot').on('tap',function(){       
            that.render()
            $('main .hot').addClass('active').siblings().removeClass('active')
        })
        $('main .future').on('tap',async function(){
            bScroll.disable()
            
            let result = await positionModel.getMoviesSoon1({
                ci : localStorage.getItem('cityId')||('1')
            })
            let moviesSoonList = that.moviesSoonList = result.coming
            let moviesSoonId = that.moviesSoonId = result.movieIds
            for(let i in moviesSoonList){
                that.moviesSoonTime.push(moviesSoonList[i]['comingTitle'])
            }
            for(let i in that.moviesSoonTime){
                that.obj[that.moviesSoonTime[i]] = []
                for(let j in moviesSoonList){
                    moviesSoonList[j].img = moviesSoonList[j].img.replace('w.h','128.180')
                    if(that.moviesSoonTime[i] == moviesSoonList[j]['comingTitle']){
                        that.obj[that.moviesSoonTime[i]].push(moviesSoonList[j])
                    }

                }
            }

            let expectedResult = await positionModel.getMoviesExpected({})
            let moviesExpectedlist = that.moviesExpectedlist = expectedResult.coming
            for(let i in moviesExpectedlist){
                moviesExpectedlist[i].img = moviesExpectedlist[i].img.replace('w.h','170.230')
                moviesExpectedlist[i].comingTitle = moviesExpectedlist[i].comingTitle.slice(0,-3)
            }
            that.rendermoviesExpected(moviesExpectedlist)
            that.expectedScroll()
            

            that.rendermoivesSoon(that.obj)
            $('.most-expected').css('display','block')
            $('main .foot').css('display','none')
            $('main .future').addClass('active').siblings().removeClass('active')
            $('main').scroll(async function(){
                if($('main').scrollTop() + $('main').height() == $('.list-container').height()){
                    let str = '';
                    that.y = that.x+9
                    for(that.x; that.x<=that.y; that.x++){
                        if(that.moviesSoonId[that.x]){
                            str += that.moviesSoonId[that.x]+'%2C';
                        }
                    }
                    let moviesSoonId=str.slice(0,-3);
                    let result = await positionModel.getMoviesSoon2({
                        ci : localStorage.getItem('cityId'),
                        moviesSoonIds : moviesSoonId
                    })
                    let moviesSoonList = result.coming
                    for(let i in moviesSoonList){
                        that.moviesSoonTime.push(moviesSoonList[i]['comingTitle'])
                    }
                    that.moviesSoonList = [...that.moviesSoonList, ...moviesSoonList]
                    for(let i in that.moviesSoonTime){
                        that.obj[that.moviesSoonTime[i]] = []
                        for(let j in that.moviesSoonList){
                            that.moviesSoonList[j].img = that.moviesSoonList[j].img.replace('w.h','128.180')
                            if(that.moviesSoonTime[i] == that.moviesSoonList[j]['comingTitle']){
                                that.obj[that.moviesSoonTime[i]].push(that.moviesSoonList[j])
                            }
        
                        }
                    }
                    that.rendermoivesSoon(that.obj)
                }
            })
        })

        let list = this.list = result.movieList
        this.renderer(list)
        let movies = this.movies = result.movieIds
        let $imgFoot = $('.foot img');

        let bScroll = new BScroll.default($main.get(0),{
            probeType:2
        })

        bScroll.on('scrollEnd',async function(){
            //上拉加载更多
            if(this.maxScrollY >= this.y){
                $imgFoot.attr('src','/assets/images/ajax-loader.gif');
                let str = '';
                that.j = that.i+9
                for(that.i; that.i<=that.j; that.i++){
                    if(movies[that.i]){
                        str += movies[that.i]+'%2C';
                    }
                }
                let nnn=str.slice(0,-3);
                let result = await positionModel.get2({
                    movieIds:nnn
                })

                let list = this.list = result.coming
                that.list = [...that.list, ...list]
                that.renderer(that.list)
                $('.btn-red').on('tap',function(){
                    location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
                })
                $('.btn-blue').on('tap',function(){
                    location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
                })

                bScroll.scrollBy(0, 40)
            }

        })

        bScroll.on('scroll',function(){
            if(this.maxScrollY > this.y){
              $imgFoot.addClass('down');
            }
        })

        $('.btn-red').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
        $('.btn-blue').on('tap',function(){
            location.hash = $(this).attr('data-to') + `/` +$(this).attr('data-id')
        })
    }
}

export default new Position();